
<template>
	<div class="full-height">
		<van-nav-bar v-if="isTitle || switch153 === 1" fixed title="秒杀列表" left-arrow class="head-color color-white"
			@click-left="clickLeft" />
		<div v-else class="flex flex-v-c head-color pos-f">
			<svg-icon icon-class="right" class="fs-22 mt-20 tran color-white" @goPage="clickLeft" />
			<div class="text-show-line-1 pos-r color-white fs-28 ml-20" @click="nearbyShopShow = true">
				<svg-icon icon-class="location" class="mr-10 " @goPage="nearbyShopShow = true" />
				{{ storeName }}
			</div>
		</div>
		<div class="has-top">
			<div class="head-top" ref="top">
				<div class="secbg"><img src="../../assets/images/seckill.png" /></div>
				<div class="scrollClass" id="scrollBox">
					<li v-for="(item, index) in tabs" :key="index" :name="index" @click="tabClick(index)"
						:class="classActive === index ? 'activeClass' : ''">
						<div class="fs-32 fw-b fs-name tac">{{ item.datetime }}</div>
						<div class="fs-22 fs-time text-show-line-1 tac">{{ item.txt }}</div>
					</li>
				</div>
			</div>
			<div :style="'padding-top:' + pageHeight + 'px'">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="moreData">
					<div class="mg-24" v-if="seckillList && seckillList.length > 0">
						<div class="info bg-white mb-16" v-for="(item, index) in seckillList" :key="index" @click="goaction(item)">
							<imgBox :img-url="item.ProductImage" class="is-216 br-12 picimg" />
							<div class="inforight">
								<p class="infoname">{{ item.ProductName }}</p>
								<div>
									<div class=" specall mt-10" v-for="(iitem, index) in item.TagList" :key="index">
										<div class="spec ">{{ iitem.TagName }}</div>
									</div>
									<div class="solidheight" v-if="item.TagList.length === 0"></div>
								</div>
								<van-progress :percentage="item.speed" stroke-width="8" class="width-100" color="#FE7D22"
									track-color="#FFE4D1" />
								<div class="flex flex-s-c price">
									<div class="">
										<span class="fs-24">￥</span>
										<span class="fs-52 fw-b mr-5">{{ item.Price }}</span>
										<span class="fs-24 originprice" v-if="item.OriginalPrice != 0">￥{{ item.OriginalPrice }}</span>
									</div>
									<div
										v-if="item.RemainQty > 0 && Date.parse(item.EndTime) > new Date() && Date.parse(item.StartTime) < new Date()"
										class="msbtn fs-28" @click="goaction(item)">立即秒杀</div>
									<div v-if="item.RemainQty <= 0" class="endbtn fs-28">已抢完</div>
									<div v-if="item.RemainQty > 0 && Date.parse(item.EndTime) < new Date()" class="endbtn fs-28">已结束</div>
									<div v-if="item.RemainQty > 0 && Date.parse(item.StartTime) > new Date()" class="endbtn fs-28"
										@click="goaction(item)">即将开抢</div>
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</div>
		</div>
		<van-popup v-model="nearbyShopShow" position="bottom" style="height:100vh;">
			<nearbyShop @close="nearbyShopShow = false" :isActive="isActive" @changeStore="changeStore" />
		</van-popup>
	</div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import imgBox from 'components/imgBox';
import { GetSeckillActivityByPage, GetNowTime, GetSeckillStartTimeList } from 'api/activity'
import { GetUserDetail } from 'api/member'
import { GetStoreInfo } from 'api/store'
import { GetBusinessFunction } from 'api/businessSetting'
import nearbyShop from '../shopProductList/nearbyShop.vue'

export default {
	components: {
		SvgIcon, imgBox, nearbyShop
	},
	data() {
		return {
			loading: false, // 加载load
			finished: false, // 无更多数据
			nowTime: null,
			storeId: 0,
			seckillList: [],
			requestData: {
				"isLongAgo": 0,
				"status": 1,
				"isByStartTime": 1,
				"auditStatus": 1,
				"isStore": 0,
				"pageIndex": 1,
				"pageSize": 10
			},
			tabs: [],
			isTitle: true, //是否显示标题
			isRefresh: false, //是否刷新页面(判断数据改变)
			interval: null,
			classActive: 0,
			seckilldata: {
				isStore: 0,
				storeId: 0
			},
			longago: false,
			storeName: '请选择门店',
			nearbyShopShow: false, //门店弹窗
			switch153: 0,
			isActive: true,
			// 滚动状态
			totalAmout: 0,
			scollRequest: true,
			end: false,
			pageHeight: 0,
		}
	},
	created() {
		localStorage.removeItem('storeId')
		this.GetBusinessFunction()
		if (this.$route.params.id === '1') {
			this.seckilldata.isStore = 1
			this.isTitle = false
		}
		if (this.$route.query.storeId) {
			this.storeId = this.$route.query.storeId
			this.requestData.storeId = this.storeId
			this.seckilldata.storeId = this.storeId
			this.GetStoreInfo()
		} else if (localStorage.getItem('storeId')) {
			this.storeId = localStorage.getItem('storeId')
			this.requestData.storeId = this.storeId
			this.seckilldata.storeId = this.storeId
			this.GetStoreInfo()
		} else if (this.$route.params.id === '1') {
			this.GetUserDetail()
		}

		this.requestData.isStore = this.$route.params.id
		if (this.$route.query.hideStore === '1') {
			this.isTitle = true
		}
	},
	mounted() {
		if (this.storeId !== 0 || this.requestData.isStore === '0') {
			this.GetSeckillStartTimeList()
		}
		this.$nextTick(function () {
			document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
		})
		this.$nextTick(() => {
			this.pageHeight = this.$refs.top.offsetHeight + 6
		})
	},
	methods: {
		GetStoreInfo() {
			const obj = {}
			obj.id = this.storeId
			GetStoreInfo(obj).then(res => {
				if (res.Data) {
					this.storeName = res.Data.Name
				}
			})
		},
		GetUserDetail() {
			GetUserDetail().then(res => {
				if (res.Data) {
					this.storeId = res.Data.DisId
					this.requestData.storeId = this.storeId
					this.seckilldata.storeId = this.storeId
					if (this.storeId !== 0) {
						this.GetStoreInfo()
						this.GetSeckillStartTimeList()
					}
				}
			})
		},
		//获取开关权限
		GetBusinessFunction() {
			GetBusinessFunction(153).then(res => {
				if (res) {
					this.switch153 = res.Data[0].Value;
				}
			})
		},
		changeStore(item) {
			this.storeId = item.ID
			this.storeName = item.Name
			this.nearbyShopShow = false
			this.requestData.storeId = this.storeId
			this.seckilldata.storeId = this.storeId
			this.longago = false
			this.GetSeckillStartTimeList()
		},
		getskeckilldata() {
			const _this = this
			_this.loading = true
			console.log(this.requestData, "fan")
			GetSeckillActivityByPage(this.requestData).then((res) => {
				if (res.Data) {
					if (res.State == 0) {
						return
					}
					if (_this.requestData.pageIndex >= res.Data.TotalAmout) {
						_this.finished = true
					} else {
						_this.finished = false
					}
					_this.loading = false
					_this.totalAmout = res.Data.TotalAmout
					res.Data.Data.forEach(x => {
						x.TagList = x.TagList.slice(0, 3)
						if (x.UseQty <= x.Quantity && x.Quantity !== 0) {
							x.speed = parseInt(((x.UseQty / x.Quantity) * 100))
						} else {
							x.speed = 100
						}
						x.Days = "00"
						x.Hours = "00"
						x.Minutes = "00"
						x.Seconds = "00"
						this.seckillList.push(x)
					})
				} else {
					_this.finished = true
					_this.loading = false
				}
			})
		},
		setInterval() {
			var that = this;
			//当前时间
			GetNowTime().then(rsp => {
				if (rsp.State == 1) {
					that.nowTime = new Date().getTime();
					that.interval = setInterval(e => {
						that.nowTime += 1000;
						if (that.isRefresh) {
							clearInterval(that.interval)
							that.isRefresh = false
							that.seckillList = []
							that.getskeckilldata();
							that.setInterval()
							return
						}
						that.setCountDown1();
					}, 1000)
				}
			})
		},
		//秒杀设置倒计时
		setCountDown1() {
			if (!this.nowTime || !this.seckillList.length) {
				return;
			}
			this.seckillList.forEach(item => {
				var diff = new Date(item.EndTime.replace(/-/g, '/')).getTime() - this.nowTime; //时间差的毫秒数
				if (diff < 0) {
					diff = new Date(item.EndTime.replace(/-/g, '/')).getTime() - this.nowTime; //时间差的毫秒数
				}
				if (diff >= 0) {
					//计算出相差天数
					var days = Math.floor(diff / (24 * 3600 * 1000));
					//计算出小时数
					var leave1 = diff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
					var hours = Math.floor(leave1 / (3600 * 1000));
					//计算相差分钟数
					var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
					var minutes = Math.floor(leave2 / (60 * 1000));
					//计算相差秒数
					var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
					var seconds = Math.round(leave3 / 1000);
					item.Days = (days > 9 ? "" : "0") + days
					item.Hours = (hours > 9 ? "" : "0") + hours
					item.Minutes = (minutes > 9 ? "" : "0") + minutes
					item.Seconds = (seconds > 9 ? "" : "0") + seconds
				} else {
					this.isRefresh = true
					item.Days = "00"
					item.Hours = "00"
					item.Minutes = "00"
					item.Seconds = "00"
				}
			});
		},

		goStore() {
			this.nearbyShopShow = true
		},
		tabChange(e) {
			this.isRefresh = false
			clearInterval(this.interval)
			// 状态id
			this.requestData.timeStatus = e
			this.requestData.pageIndex = 1
			this.seckillList = []
			this.getskeckilldata()
			if (e !== 2) {
				this.setInterval()
			}
		},
		tabClick(num) {
			this.classActive = num
			this.requestData.isLongAgo = 0
			this.requestData.pageIndex = 1
			this.requestData.startTime = ''
			this.seckillList = []
			this.totalAmout = 0
			if (this.tabs[num].timeTxt === '更早') {
				this.requestData.isLongAgo = 1
				this.requestData.startTime = this.$utils.yesterday().startDate
			} else {
				this.requestData.startTime = this.tabs[num].time
			}
			this.getskeckilldata()
		},

		// 上拉加载更多
		moreData() {
			this.requestData.pageIndex = this.requestData.pageIndex + 1
			this.getskeckilldata()
		},
		// 滚动事件触发下拉加载
		onScroll() {
			const _this = this
			if (_this.scollRequest === true) {
				if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
					_this.scollRequest = false
					// alert('触发！！！')
					console.log('加载')
					_this.scollTop = this.$utils.getScrollTop('scrollBox')
					if (_this.requestData.pageIndex < _this.totalAmout) {
						_this.requestData.pageIndex++
						_this.GetWholeSaleListForSku()
					} else {
						console.log('end')
						_this.end = true
					}
					// }
				}
			}
		},
		GetSeckillStartTimeList() {
			var _this = this
			_this.tabs = []
			GetSeckillStartTimeList(this.seckilldata).then((res) => {
				if (res.State == 1) {
					if (res.Data.length > 0) {
						GetNowTime().then((rsp) => {
							if (res.State == 1) {
								var todayTime = new Date(rsp.Data.replace(/-/g, "/"))
								todayTime.setHours(0)
								todayTime.setMinutes(0)
								todayTime.setSeconds(0)
								todayTime.setMilliseconds(0)
								var oneday = 1000 * 60 * 60 * 24
								// 昨天
								var yesterdayTime = new Date(todayTime - oneday)
								var tomorrowTime = new Date(todayTime.getTime() + oneday)
								var towDayTime = new Date(todayTime.getTime() + 2 * oneday)
								var nowTime = new Date(rsp.Data.replace(/-/g, "/"))
								var data = res.Data
								for (var i = 0; i < data.length; i++) {
									let time = new Date(data[i].replace(/-/g, "/"))
									let datetime =
										time.getHours() +
										":" +
										(time.getMinutes() > 9
											? time.getMinutes().toString()
											: "0" + time.getMinutes())
									if (time < yesterdayTime) {
										if (_this.longago == false) {
											_this.tabs.push({
												isstart: true,
												timeTxt: "更早",
												datetime: '更早',
												time: yesterdayTime,
												active: false,
												txt: '热卖中'
											})
										}
										_this.longago = true
									}
									if (time >= yesterdayTime && time < todayTime) {
										_this.tabs.push({
											isstart: true,
											timeTxt: "昨日",
											datetime: datetime,
											time: time,
											active: false,
											txt: '昨日热卖'
										})
									}
									if (time >= todayTime && time < tomorrowTime) {
										if (nowTime >= time) {
											_this.tabs.push({
												isstart: true,
												timeTxt: '今日',
												datetime: datetime,
												time: time,
												active: false,
												txt: '热卖中'
											})
										} else {
											_this.tabs.push({
												isstart: false,
												timeTxt: '今日',
												datetime: datetime,
												time: time,
												active: false,
												txt: '即将开抢'
											})
										}
									}
									if (time >= tomorrowTime && time < towDayTime) {
										_this.tabs.push({
											isstart: false,
											timeTxt: "明日",
											datetime: datetime,
											time: time,
											active: false,
											txt: '明日开抢'
										})
									}
								}
								//设置默认选中的时间点
								if (_this.tabs.length > 0) {
									if (_this.tabs.length == 1) {
										_this.changeStartTime(_this.tabs[0])
									} else {
										if (!_this.tabs[0].isstart) {
											_this.changeStartTime(_this.tabs[0])
										} else if (_this.tabs[_this.tabs.length - 1].isstart) {
											_this.changeStartTime(_this.tabs[_this.tabs.length - 1])
										} else {
											for (var i = 1; i <= _this.tabs.length - 1; i++) {
												if (!_this.tabs[i].isstart && _this.tabs[i - 1].isstart) {
													_this.changeStartTime(_this.tabs[i - 1])
												}
											}
										}
									}
								}
								for (var i = 0; i <= _this.tabs.length - 1; i++) {
									if (_this.tabs[i].active) {
										this.tabIndex = i
										_this.classActive = i
									}
								}
								this.tabClick(this.classActive)
							} else {
								this.$toast(res.Msg)
							}
						})
					} else {
						this.seckillList = []
					}
				} else {
					this.$toast(res.Msg)
				}

			})
		},
		changeStartTime(item) {
			if (this.currStartTime) this.currStartTime.active = false
			this.currStartTime = item
			this.currStartTime.active = true
		},
		//立即秒杀
		goaction(item) {
			console.log(item, "跳转")
			let id = item.ActivityId
			let store_id = item.StoreId
			if (store_id > 0) {
				localStorage.setItem('storeId', store_id)
			}
			window.location.href = this.$LocalDomain + '/circle/#/seckillDetail/' + id
		},
		clickLeft() {
			localStorage.removeItem('storeId')
			this.$utils.back(this.$route.path)
		},
	}
}
</script>
<style lang="scss" scoped>
.color-white {
	/deep/.van-icon {
		color: #fff;
	}

	/deep/.van-nav-bar__title {
		color: #fff;
	}
}

.head-color {
	background: linear-gradient(180deg, #FE3E4D 0%, #FE5E64 100%);
}

.tran {
	transform: rotateZ(180deg);
	margin: 0 20px;
}

.goStore {
	position: absolute;
	right: 10px;
	top: 16px;
}

.pos-f {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1111;
	height: 88px;
}

.info {
	border-radius: 16px;
	height: 264px;
	padding: 24px;
	display: flex;

	.picimg {
		flex: 1;
	}
}

.inforight {
	position: relative;
	margin-left: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 216px;

	.infoname {
		font-size: 26px;
		font-weight: 700px;
		width: 406px;
		height: 34px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.specall {
		display: inline-flex;
	}

	.spec {
		background: #FEF8E1;
		border-radius: 8px;
		color: #FE8000;
		text-align: center;
		font-size: 22px;
		margin-right: 15px;
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
	}

	.originprice {
		text-decoration: line-through;
		color: #B2B2B2;
	}

	.msbtn {
		background: linear-gradient(to right, #FE8224, #FF460A);
		width: 140px;
		height: 60px;
		line-height: 60px;
		border-radius: 16px;
		text-align: center;
		box-shadow: 0px 4px 14px #fff4ed;
		color: white;
	}

	.endbtn {
		background: #b8b8b8;
		width: 140px;
		height: 60px;
		line-height: 60px;
		border-radius: 16px;
		text-align: center;
		box-shadow: 0px 4px 14px #fff4ed;
		color: white;
	}
}

.solidheight {
	height: 40px;
	width: 100%;
}

.scrollClass {
	margin-top: 28px;
	display: flex;
	overflow-x: auto;
	position: absolute;
	bottom: 0;
	width: 100%;

	li {
		width: 25%;
		color: #fff;
		flex-shrink: 0;
		margin-right: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

::-webkit-scrollbar {
	/* 隐藏滚动条 */
	display: none;
}

.head-top {
	height: 388px;
	background: linear-gradient(138deg, #FE8224 0%, #FE4955 100%);
	position: relative;
	position: fixed;
	z-index: 1111;
}

.activeClass {
	background: #fff;
	border-radius: 16px 16px 0 0;

	.fs-name {
		color: #FF6F22;
	}

	.fs-time {
		color: #FF6F22;
	}
}

.fs-name {
	line-height: 1.2;
}

.fs-time {
	color: #fff;
}

.width-100 {
	width: 100%;
}

.price {
	height: 60px;
	color: #FF731E;
}

/deep/.van-hairline--bottom:after {
	border-bottom: none;
}

.full-height {
	height: 100vh;
	background: #eee;
}

.secbg {
	height: 272px;
	//img{
	//	width: 100%;
	//	height: 100%;
	//}
}
</style>
